<template>
  <div id="container"></div>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {
    this.Positioning();
  },

  mounted() {
    var map = new AMap.Map("container", {
      center: [113.3245904, 23.1066805],
      zoom: 15
    });

    var infoWindow = new AMap.InfoWindow({
      //创建信息窗体
      isCustom: true, //使用自定义窗体
      content: `<div style=" width:250px;
                              
                      font-size: 12px;
                      background:white;" >
    <h5 style=" background: #f9f9f9;  font-size: 14px;   border-bottom: 1px solid #3333;" >
      方恒假日酒店
      <span style="font-size:11px;color:#F00;">价格:318</span>
    </h5>
    <div style=" display: flex; padding: 5px 0;">
      <img src="http://tpc.googlesyndication.com/simgad/5843493769827749134" />
      <span class="cont">
        地址：北京市朝阳区阜通东大街6号院3号楼东北8.3公里"
        <br />电话：010-64733333
        <a
          href="https://ditu.amap.com/detail/B000A8URXB?citycode=110105"
         style=" color: red;"
        >详细信息</a>
      </span>
    </div>
  </div> `
    });

    var onmouseover = function(e) {
      infoWindow.open(map, e.target.getPosition()); //打开信息窗体

      //e.target就是被点击的Marker
    };
    var onmouseout = function(e) {
      infoWindow.close(map, e.target.getPosition()); //打开信息窗体
      //e.target就是被点击的Marker
    };

    var marker = new AMap.Marker({
      position: [113.3245904, 23.1066805],
      conter: `<div>1</div>`
    });
    map.add(marker);
    marker.on("mouseover", onmouseover); //绑定click事件
    marker.on("mouseout", onmouseout);
  },
  methods: {
    Positioning() {
      this.$axios({
        url: "https://restapi.amap.com/v3/ip",
        params: {
          key: "e2ee7c0c1acd253af5a8b1227cff90fe"
        }
      }).then(res => {
        console.log(res.data.info);
        if (res.data.info == "OK") {
          // console.log(res.data);

          this.$message({
            message: "当前定位到" + res.data.city,
            type: "success"
          });
          let city = res.data.city;
          this.$emit("userInfo", city);
          console.log(this.datacity);
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
#container {
  height: 260px;
  width: 336px;
}
.info {
  width: 316px;
  font-size: 12px;
  background: white;
  .title {
    background: #f9f9f9;
    font-size: 14px;
    border-bottom: 1px solid #3333;
  }
  .cont {
    display: flex;
    padding: 5px 0;
  }
  .router {
    color: red;
  }
}
</style>